<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-basic-view [padding]="true" [showBackLink]="false">
    <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
        <button
            mat-icon-button
            color="accent"
            (click)="openDocumentation()"
            matTooltip="Show documentation"
        >
            <i class="material-icons">menu_book</i>
        </button>
        <button
            mat-icon-button
            color="accent"
            (click)="removeSelection()"
            matTooltip="Cancel"
        >
            <i class="material-icons">close</i>
        </button>
    </div>
    <div fxLayout="column" fxLayoutAlign="center stretch" *ngIf="adapter">
        <sp-adapter-configuration-header
            [displayName]="displayName"
            [isEditMode]="isEditMode"
        ></sp-adapter-configuration-header>

        <mat-horizontal-stepper
            [linear]="true"
            #stepper
            color="accent"
            class="stepper"
        >
            <mat-step>
                <ng-template matStepLabel>Settings</ng-template>
                <sp-adapter-settings
                    [adapterDescription]="adapter"
                    (updateAdapterDescriptionEmitter)="adapter = $event"
                    (clickNextEmitter)="clickSpecificSettingsNextButton()"
                    (removeSelectionEmitter)="removeSelection()"
                >
                </sp-adapter-settings>
            </mat-step>

            <mat-step>
                <ng-template matStepLabel>Configure fields</ng-template>
                <sp-event-schema
                    fxLayout="column"
                    fxFlex="100"
                    [adapterDescription]="adapter"
                    [isEditMode]="isEditMode"
                    (clickNextEmitter)="clickEventSchemaNextButtonButton()"
                    (goBackEmitter)="goBack()"
                    (removeSelectionEmitter)="removeSelection()"
                >
                </sp-event-schema>
            </mat-step>

            <mat-step>
                <ng-template matStepLabel>Start Adapter</ng-template>
                <sp-start-adapter-configuration
                    [adapterDescription]="adapter"
                    [eventSchema]="adapter.dataStream.eventSchema"
                    [isEditMode]="isEditMode"
                    (removeSelectionEmitter)="removeSelection()"
                    (goBackEmitter)="goBack()"
                    (adapterStartedEmitter)="adapterWasStarted()"
                >
                </sp-start-adapter-configuration>
            </mat-step>
        </mat-horizontal-stepper>
    </div>
</sp-basic-view>
